<div class="f-nav-detail">
    <detail-nav></detail-nav>
</div>
<div class="footerSwitchBox">
    <div class="footerSwitchFlex">
        <div class="footerSwitchList">
            <ul class="listCon">
                <li ng-init="visible=false">
                    <!--<p ng-class="{'active':open=='introduceCtrl'}" ng-click="goOther('footerCtrl.introduceCtrl')">> 关于我们</p>-->
                    <p ng-class="{'active':routerToStateName == 'footerCtrl.introduceCtrl'}" ng-click="goOther('footerCtrl.introduceCtrl')">> 关于我们</p>
                    <ul class="visible" ng-hide="visible==false" ng-init="tab=1">
                        <li ng-class="{'active2':tab==1}" ng-click="tab=1">> 工程界简介</li>
                        <li ng-class="{'active2':tab==2}" ng-click="tab=2">> 合作伙伴</li>
                    </ul>
                </li>
                <li ng-init="hide=false">
                    <p ng-class="{'active':routerToStateName == 'footerCtrl.helpCtrl' || routerToStateName == 'footerCtrl.helpListCtrl' || routerToStateName == 'footerCtrl.helpDetailCtrl'}" ng-click="goOther('footerCtrl.helpCtrl')">> 帮助中心</p>
                </li>
                <li><p ng-click="goOther('footerCtrl.callBackCtrl')" ng-class="{'active':routerToStateName == 'footerCtrl.callBackCtrl'}">> 意见反馈</p>  </li>
                <li>
                   <p ng-click="goOther('footerCtrl.aboutUsCtrl')" ng-class="{'active':routerToStateName == 'footerCtrl.aboutUsCtrl'}">> 联系我们</p>
                </li>
                <li>
                   <p ng-click="goOther('footerCtrl.serviceRuleCtrl')" ng-class="{'active':routerToStateName == 'footerCtrl.serviceRuleCtrl'}">> 服务条款</p>
                </li>
            </ul>
        </div>
        <div style="width: 980px;background: #fff;float: right;margin-top:30px;overflow: hidden;" ui-view></div>
    </div>
</div>
<div ng-include="'app/business/common/footer.html'"></div>
<style>
    /*动画效果*/
    /**/
    .active2,.active{
        color:#30a3ff;
    }
    .active2 {
        background: #f7f7f7;
    }
    .footerSwitchBox{
        width:100%;
        padding-bottom: 50px;
        background: #f8f8f8;
    }
        .footerSwitchFlex {
            width:1200px;
            margin:0 auto;
            overflow: hidden;
        }
        .footerSwitchList {
            float: left;
            margin-top:30px;
            width:200px;
            height:452px;
            background: #fff;
        }
            .footerSwitchList ul.listCon {
                margin-top:40px;
            }
        .footerSwitchList ul.listCon li p {
            cursor: pointer;
            padding-left:25px;
            height:49px;
            line-height:49px;
        }
        .footerSwitchList ul.listCon li ul li {
            cursor: pointer;
            height:49px;
            line-height:49px;
            padding-left:58px;
            -webkit-animation:opa 1.5s;
            -o-animation:opa 1.5s;
            animation:opa 1.5s;
        }
        .footerSwitchList ul.listCon li ul.visible{
            height:96px;
            animation: ani  0.5s;
        }
    
</style>